<template>
  <div class="container">
    <div class="boxWrap">
      <!-- 头部 -->
      <loginHeader></loginHeader>
      <div class="mainBox identityChoiceBox">
        <div class="choiceTitle">请选择企业身份</div>
        <div class="choiceTypeBox">
          <ul>
            <li
              @mouseover="mouseOver('constructor')"
              @mouseleave="mouseleave('constructor')"
              @click="toSystem('constructor')"
            >
              <div>
                <div class="title">
                  <img
                    src="/static/img/identityChoice/constructor.png"
                    alt=""
                  />
                  <span class="way">总承包施工企业</span>
                </div>
                <div class="explainBox">
                  <span
                    >选择总承包施工企业身份则可管理作为总承包施工企业的项目</span
                  >
                </div>
                <div>
                  <el-button
                    v-show="isChoiceOne"
                    class="commonBut saveBtn"
                    type="primary"
                    >选择</el-button
                  >
                </div>
              </div>
            </li>
            <li
              @mouseover="mouseOver('owner')"
              @mouseleave="mouseleave('owner')"
              @click="toSystem('owner')"
            >
              <div>
                <div class="title">
                  <img
                    src="../../../static/img/identityChoice/builder.png"
                    alt=""
                  />
                  <span class="way">建设业主</span>
                </div>
                <div class="explainBox">
                  <span>选择建设业主身份则可管理作为建设业主的项目</span>
                </div>
                <div>
                  <el-button
                    v-show="isChoiceTwo"
                    class="commonBut saveBtn"
                    type="primary"
                    >选择</el-button
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'
import loginHeader from '@/components/publicCom/loginHeader'

export default {
  name: 'identityChoice',
  components: {
    loginHeader,
  },
  data() {
    return {
      isChoiceOne: false, //鼠标移入显示选择按钮
      isChoiceTwo: false,
    }
  },
  created() {},
  methods: {
    //跳转到系统内部
    toSystem(choiceType) {
      localStorage.setItem('isFirstIdentityChoice', false)
      localStorage.setItem('choiceType', choiceType)
      if (choiceType == 'owner') {
        localStorage.setItem('judgeRoleCode', 'owner')
      } else {
        localStorage.setItem('judgeRoleCode', 'constructor')
      }
      this.getMenuList(choiceType)
    },
    // 移入
    mouseOver(type) {
      if (type === 'constructor') {
        this.isChoiceOne = true
      } else if (type === 'owner') {
        this.isChoiceTwo = true
      }
    },
    //移出
    mouseleave(type) {
      if (type === 'constructor') {
        this.isChoiceOne = false
      } else if (type === 'owner') {
        this.isChoiceTwo = false
      }
    },
    getMenuList(choiceType) {
      this.axios({
        method: 'post',
        url: '/api-m/menus/me',
        data: {
          selectedName: choiceType,
        },
        headers: {
          Authorization: localStorage.getItem('access_token'), //设置token 其中K名要和后端协调好
        },
      }).then(
        (response) => {
          //先清除之前的选中
          //清除tab栏数据
          this.$store.state.sliderBar = []
          this.$store.state.keekAlives = []
          localStorage.removeItem('sliderBar')
          // 顶部栏的选中清空
          this.$store.state.currentItem = ''
          this.$store.state.currentSelectItem = ''

          this.canLogin = false
          // this.$store.state.menuList = response.data;
          if (response.data == '' || response.data == null) {
            this.errorMsg_QY = '该账号未分配权限'
            this.errorMsg_JC = '该账号未分配权限'
            return
          }
          // 处理返回数据，设置默认选中项
          for (var i = 0; i < response.data.appList.length; i++) {
            var item = response.data.appList[i]
            if (item.isSelected) {
              response.data.appList.splice(i, 1)
              response.data.appList.unshift(item)
            }
          }
          // 处理数据结束
          this.$store.state.menuList = response.data.appList[0].menuList
          var menuListTotalCon = []
          for (var i = 0; i < response.data.appList.length; i++) {
            var item = response.data.appList[i]
            menuListTotalCon.push(response.data.appList[i].menuList)
          }

          var menuListTotal = []
          for (var i = 0; i < menuListTotalCon.length; i++) {
            menuListTotal = menuListTotal.concat(menuListTotalCon[i])
          }

          this.$store.state.menuListTotal = menuListTotal

          this.$store.state.appList = response.data.appList
          this.$store.state.currentItem = ''
          // localStorage.setItem("menuList",JSON.stringify(response.data));
          localStorage.setItem('urlName', 'constructCompanyHome')
          //默认选中

          var item = response.data.appList[0]

          //默认选中
          if (item.menuList[0].child) {
            this.$router.push(item.menuList[0].child[0].url)
            this.$store.state.activeMenu = item.menuList[0].child[0].url
            //tab栏选中
            this.$store.state.sliderBar = [item.menuList[0].child[0]]
            this.$store.state.activeIndex = item.menuList[0].child[0].url
          } else {
            if (item.code == 'company') {
              localStorage.setItem('urlName', 'companyHome')
            } else if (item.code == 'owner') {
              localStorage.setItem('urlName', 'constructCompanyHomeJS')
            } else if (item.code == 'project' || item.code == 'constructor') {
              localStorage.setItem('urlName', 'constructCompanyHome')
            }
            this.$router.push(item.menuList[0].url)
            this.$store.state.activeMenu = item.menuList[0].url

            //tab栏选中
            localStorage.removeItem('sliderBar')
          }
        },
        (response) => {
          this.isAdd = false
          this.$message.error('登录失败')
          this.canLogin = false
        }
      )
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .boxWrap {
    background: #f2f4f6;
    position: fixed;
    top: 0;
    left: 0;
    right: -17px;
    bottom: 0;
    background-size: 100% 100%;
    overflow-y: auto;
    .mainBox {
      width: 980px;
      height: 522px;
      background-color: #fff;
      margin: 0 auto;
      border-radius: 10px;
      margin-bottom: 35px;
      text-align: center;
      position: relative;
      .choiceTitle {
        padding: 60px 0 40px 0;
        font-size: 28px;
        color: #333333;
        text-align: center;
        font-weight: 700;
      }
      .choiceTypeBox {
        display: block;
        text-align: center;
        margin-bottom: 0;
        padding: 0 216px;
        p {
          font-size: 28px;
          color: #333;
          margin-bottom: 60px;
        }
        ul li {
          display: inline-block;
          float: left;
          width: 234px;
          height: 334px;
          color: #fff;
          border-radius: 8px;
          cursor: pointer;
          border: 1px solid #fff \0;
          // 动画
          border-radius: 5px;
          transition: ease-in 0.3s;
          background-size: 0 1px, 1px 0, 0 1px, 1px 0;
          background-position: left top, right top, right bottom, left bottom;
          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
          &:last-child {
            margin-left: 80px;
          }
          img {
            width: 120px;
            height: 120px;
          }
          .way {
            font-size: 18px;
            display: block;
            color: #333;
            margin: 16px 0;
            font-weight: bold;
          }
          .title {
            padding-top: 8px;
          }
          .explainBox {
            height: 70px;
            padding: 0 32px;
            text-align: left;
            margin-bottom: 26px;
            span {
              font-size: 14px;
              color: #666;
              line-height: 21px;
            }
          }
        }
        li:hover {
          border: 1px solid #23569d;
          background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
          -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
          -o-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
          .way {
            color: #23569d;
          }
        }
      }
    }
  }
}
.container .boxWrap .identityChoiceBox {
  padding: 0;
}
.boxWrap /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/headerBG.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 125px;
}
</style>
